var vm = new Vue({
    el:"#app",
    data:{
        city:"",
        broadbander:"",
        ip:"",
        editForm:$('#editForm')
    },
    methods:{
        /**
         * 初始化bootstrapTable
         */
        initTable:function(){
            var _this = this;
            $('#tbServer').bootstrapTable($.extend(bootstrapTableOption,{
                url: g_comm.manager_url+'/devServer/list',           //请求后台的URL（*）
                queryParams: _this.queryParams,               //传递参数（*）
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                columns: [{
                    field: 'ip',
                    title: '公网IP地址',
                    formatter:function (value,row,index) {
                        return '<span style="color: dodgerblue;" data-id="'+row.id+'" data-check-permission="dev:server:detail" onclick="vm.detail(this)">'+value+'</span>';
                    }
                },{
                    field: 'city',
                    title: '所在城市'
                }, {
                    field: 'broadbander',
                    title: '所接入运营商'
                }, {
                    field: 'status',
                    title: '状态',
                    formatter:function (value,row,index) {
                        if (value == '1') {
                            return '<span class="label label-success">在线</span>';
                        } else if (value == '0') {
                            return '<span class="label label-danger">离线</span>';
                        }
                    }
                },{
                    field: 'updateTime',
                    title: '最后更新时间',
                    formatter:function(value,row,index){
                        if(value!=null){
                            return new Date(value).toString("yyyy-MM-dd HH:mm");
                        }else{
                            return new Date(row.createTime).toString("yyyy-MM-dd HH:mm");
                        }
                    }
                },{
                    field: '',
                    title: '操作',
                    formatter : function(value, row, index) {
                        return  '<div style="float:left;margin-right: 10px;width: 24px;height: 24px;" data-id="'+row.id+'" data-buyers="'+row.buyers+'" data-check-permission="dev:server:update" onclick="vm.edit(this)">' +
                                    '<img src="static/img/dev/edit.png" title="编辑">' +
                                '</div>'+
                                '<div style="float:left;margin-right: 10px;width: 24px;height: 24px;" data-id="'+row.id+'" data-check-permission="dev:server:detail" onclick="vm.detail(this)">' +
                                    '<img src="static/img/dev/more.png" title="设备详情">' +
                                '</div>';
                    }
                }
                ]
            }));


        },
        /**
         * 查询参数
         * @param params
         */
        queryParams:function (params) {
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                city:this.city,
                broadbander:this.broadbander,
                ip:this.ip
            };
        },
        /**
         * 设备详情
         * */
        detail:function (obj) {
            var id = $(obj).attr('data-id');
            $.ajax({
                url: g_comm.manager_url+"/devServer/detail",
                data: {id:id},
                success: function(r){
                    if(r.code == 0){
                        var data = r.data;
                        //初始化详情模板
                        var getTpl = detailtpl.innerHTML
                            ,view = document.getElementById('detailAlert');
                        layui.laytpl(getTpl).render(data, function(html){
                            view.innerHTML = html;
                        });//初始化详情模板end

                        layer.open({
                            type: 1,
                            title: '设备详情',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['650px', '400px'],
                            content: $layui('#detailAlert'),
                            btn:['关闭']
                        });
                    }else{
                        layer.alert(r.msg,{
                            title: '提示框',
                            icon:0
                        });
                    }
                }
            });

        },//detail---end
        /**
         * 编辑
         */
        edit:function(obj){
            var id = $(obj).attr('data-id');
            var buyers = $(obj).attr('data-buyers');
            $('#editBuyers').val(buyers);
            // this.editForm[0].reset();
            layer.open({
                type: 1,
                title: '编辑',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['650px', '250px'],
                content: $layui('#editAlert'),
                btn:['保存','关闭'],
                yes:function (index) {
                    /*if ($('#editLocation').val() == ""){
                        $('#editLocation').focus();
                        layer.tips('安装位置不能为空',$('#editLocation'),{tips: [2,'rgb(53, 149, 204)']});
                        return false;
                    }*/
                    if ($('#editBuyers').val() == ""){
                        $('#editBuyers').focus();
                        layer.tips('采购商不能为空',$('#editBuyers'),{tips: [2,'rgb(53, 149, 204)']});
                        return false;
                    }
                    vm.editForm.ajaxSubmit({
                        type: "PUT",
                        url: g_comm.manager_url + '/devServer/update',
                        data: {
                            "id": id
                        },
                        success: function (r) {
                            layer.alert(r.msg,{icon: 0},function () {
                                vm.search();
                                layer.closeAll();
                            })
                        }
                    });
                }
            });
        },
        /**
         * 搜索
         */
        search:function () {
            $('#tbServer').bootstrapTable('refreshOptions',{pageNumber:1});
        },
        /**
         * 批量导入
         */
        batchImport:function () {
            layer.open({
                type: 1,
                title: '批量导入',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['60%', '65%'],
                content: $layui('#batchImportAlert')
            });
        },
        /**
         * 初始化上传文件控件
         **/
        initUploadFile:function () {
            $("#batchImportFile").fileinput({
                uploadUrl: g_comm.manager_url+'/devServer/importExcel',  // 上传文件的路径
                uploadAsync: true,     //是否异步上传
                language: 'zh',
                allowedFileExtensions: ['xlsx'],//上传文件扩展名
                shouUpload: true,
                showRemove: true,
                maxFileNum: 1,
            });//end
            //异步上传返回结果处理
            $("#batchImportFile").on("fileuploaded", function (event, data, previewId, index) {
                if(data.response.code == 0){//成功
                    layer.alert(data.response.msg,{icon: 1},function () {
                        vm.search();
                        layer.closeAll();
                    });
                }else{
                    if(data.response.data.repeatData != undefined){//DB有重复数据
                        var repeatList = data.response.data.repeatData;
                        var msg = '请删除一下重复的ip:</br>';
                        for(var i=0;i<repeatList.length;i++){
                            msg += repeatList[i].ip+'</br>';
                        }
                        msg += '再进行导入';
                        layer.alert(msg,{icon: 2,area: ['400px', '300px']},function () {
                            vm.search();
                            layer.closeAll();
                        });
                    }else{
                        layer.alert(data.response.msg,{icon: 2},function () {
                            vm.search();
                            layer.closeAll();
                        });
                    }
                }

            });//end
        }
    },
    mounted:function () {
        this.initTable();
        this.initUploadFile();
    }
});